<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  <title>Babylon Template</title>

  <style>
    html, body {
      overflow: hidden;
      width: 100%;
      height: 100%;
      margin: 0;
      padding: 0;
    }

    #renderCanvas {
      width: 100%;
      height: 100%;
      touch-action: none;
    }
  </style>
  <script src="https://preview.babylonjs.com/babylon.js"></script>
  <script src="https://preview.babylonjs.com/loaders/babylonjs.loaders.min.js"></script>
  <script src="https://code.jquery.com/pep/0.4.3/pep.js"></script>
</head>

<body>

<canvas id="renderCanvas" touch-action="none"></canvas>
//touch-action="none" for best results from PEP

<script>
  /**
   * 根据rgb获取color3
   **/
  var getColor3ByRgb = function (rgb) {
    if (!rgb || rgb.length === 0) return [0, 0, 0];
    rgb = rgb.substring(rgb.indexOf("(") + 1, rgb.length - 1).split(",")
    return [rgb[0] / 256, rgb[1] / 256, rgb[2] / 256]
  }
  var canvas = document.getElementById("renderCanvas"); // 得到canvas对象的引用
  var engine = new BABYLON.Engine(canvas, true); // 初始化 BABYLON 3D engine

  /******* Add the create scene function ******/
  var createScene = function () {

    // 创建一个场景scene
    var scene = new BABYLON.Scene(engine);

    // 添加一个相机，并绑定鼠标事件
    var camera = new BABYLON.ArcRotateCamera("Camera", Math.PI / 2, Math.PI / 2, 10, new BABYLON.Vector3.Zero(), scene);
    camera.attachControl(canvas, true);

    // 添加一组灯光到场景
    var light1 = new BABYLON.HemisphericLight("light1", new BABYLON.Vector3(1, 1, 0), scene);

    // 设置立方体长宽高并创建
    var myBox = BABYLON.MeshBuilder.CreateBox("myBox", {
      height: 5,
      width: 2,
      depth: 2,
      faceColors: [
        new BABYLON.Color3(...getColor3ByRgb('rgb(229,9,9)')),
        new BABYLON.Color3(...getColor3ByRgb('rgb(241,216,56)')),
        new BABYLON.Color3(...getColor3ByRgb('rgb(2,109,245)')),
        new BABYLON.Color3(...getColor3ByRgb('rgb(2,245,111)')),
        new BABYLON.Color3(...getColor3ByRgb('rgb(180,2,245)')),
        new BABYLON.Color3(...getColor3ByRgb('rgb(231,118,15)')),]
    }, scene);

    return scene;
  };
  /******* End of the create scene function ******/

  var scene = createScene(); //Call the createScene function

  // 最后一步调用engine的runRenderLoop方案，执行scene.render()，让我们的3d场景渲染起来
  engine.runRenderLoop(function () {
    scene.render();
  });

  // 监听浏览器改变大小的事件，通过调用engine.resize()来自适应窗口大小
  window.addEventListener("resize", function () {
    engine.resize();
  });
</script>
</body>
</html>
